<template>
  <div class="big-screen-designer">
    <el-container>
      <!-- 左侧组件库 -->
      <el-aside width="250px" class="components-panel">
        <el-tabs type="border-card">
          <el-tab-pane label="基础组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'text')"
              >
                <el-icon><Document /></el-icon>
                <span>文本</span>
              </div>
              <div 
                classclass="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'image')"
              >
                <el-icon><Picture /></el-icon>
                <span>图片</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'border')"
              >
                <el-icon><Grid /></el-icon>
                <span>边框</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图表组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-line')"
              >
                <el-icon><DataAnalysis /></el-icon>
                <span>折线图</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-bar')"
              >
                <el-icon><Histogram /></el-icon>
                <span>柱状图</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-pie')"
              >
                <el-icon><PieChart /></el-icon>
                <span>饼图</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-radar')"
              >
                <el-icon><DataBoard /></el-icon>
                <span>雷达图</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="地图组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'map-china')"
              >
                <el-icon><Location /></el-icon>
                <span>中国地图</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-aside>

      <!-- 中间画布区域 -->
      <el-main class="canvas-panel">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>大屏设计器</span>
              <div class="actions">
                <el-button type="primary" @click="previewScreen">预览大屏</el-button>
                <el-button @click="saveConfig">保存配置</el-button>
                <el-button @click="exportConfig">导出配置</el-button>
              </div>
            </div>
          </template>
          
          <div 
            class="design-canvas"
            @drop="handleDrop"
            @dragover="handleDragOver"
          >
            <div class="screen-container">
              <draggable 
                v-model="components" 
                item-key="id"
                animation="200"
                group="components"
                handle=".drag-handle"
                @start="drag=true"
                @end="drag=false"
              >
                <template #item="{ element, index }">
                  <div 
                    class="canvas-component"
                    :class="{ active: selectedIndex === index }"
                    @click="selectComponent(index)"
                  >
                    <div class="component-toolbar">
                      <el-icon class="drag-handle"><Rank /></el-icon>
                      <el-icon @click.stop="copyComponent(index)"><CopyDocument /></el-icon>
                      <el-icon @click.stop="deleteComponent(index)"><Delete /></el-icon>
                    </div>
                    
                    <component 
                      :is="renderComponent(element)" 
                      :config="element.config"
                      :data="element.data"
                      class="component-content"
                    />
                  </div>
                </template>
              </draggable>
            </div>
            
            <div v-if="components.length === 0" class="empty-canvas">
              <el-icon><Monitor /></el-icon>
              <p>从左侧拖拽组件到此处</p>
            </div>
          </div>
        </el-card>
      </el-main>

      <!-- 右侧属性面板 -->
      <el-aside width="300px" class="properties-panel">
        <el-card v-if="selectedIndex !== null">
          <template #header>
            <div class="card-header">
              <span>属性配置</span>
            </div>
          </template>
          
          <div class="properties-form">
            <el-form label-position="top">
              <el-form-item label="组件类型">
                <el-input v-model="currentComponent.type" disabled></el-input>
              </el-form-item>
              
              <el-form-item label="组件名称">
                <el-input v-model="currentComponent.config.name" placeholder="组件名称"></el-input>
              </el-form-item>
              
              <el-form-item label="宽度">
                <el-input v-model="currentComponent.config.width" placeholder="如: 300px"></el-input>
              </el-form-item>
              
              <el-form-item label="高度">
                <el-input v-model="currentComponent.config.height" placeholder="如: 200px"></el-input>
              </el-form-item>
              
              <el-form-item label="左边距">
                <el-input v-model="currentComponent.config.left" placeholder="如: 100px"></el-input>
              </el-form-item>
              
              <el-form-item label="上边距">
                <el-input v-model="currentComponent.config.top" placeholder="如: 100px"></el-input>
              </el-form-item>
              
              <template v-if="currentComponent.type === 'text'">
                <el-form-item label="文本内容">
                  <el-input 
                    v-model="currentComponent.config.text" 
                    type="textarea"
                    :rows="3"
                    placeholder="请输入文本内容"
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="字体大小">
                  <el-input v-model="currentComponent.config.fontSize" placeholder="如: 16px"></el-input>
                </el-form-item>
                
                <el-form-item label="字体颜色">
                  <el-color-picker v-model="currentComponent.config.color" />
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type.startsWith('chart-')">
                <el-form-item label="图表标题">
                  <el-input v-model="currentComponent.config.title" placeholder="图表标题"></el-input>
                </el-form-item>
                
                <el-form-item label="图表配置">
                  <el-input 
                    v-model="currentComponent.config.option" 
                    type="textarea" 
                    :rows="10"
                    placeholder="请输入图表配置（JSON格式）"
                  />
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type === 'image'">
                <el-form-item label="图片地址">
                  <el-input v-model="currentComponent.config.src" placeholder="图片URL"></el-input>
                </el-form-item>
                
                <el-form-item label="图片描述">
                  <el-input v-model="currentComponent.config.alt" placeholder="图片描述"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </div>
        </el-card>
        
        <el-card v-else>
          <template #header>
            <div class="card-header">
              <span>组件属性</span>
            </div>
          </template>
          <div class="no-selection">
            <p>请选择一个组件进行配置</p>
          </div>
        </el-card>
      </el-aside>
    </el-container>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="大屏预览"
      width="90%"
      full-screen
    >
      <big-screen-preview :config="components" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Document,
  Picture,
  Grid,
  DataAnalysis,
  Histogram,
  PieChart,
  DataBoard,
  Location,
  Monitor,
  Rank,
  CopyDocument,
  Delete
} from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import BigScreenPreview from '@/components/BigScreenPreview.vue'

// 组件数据
const components = ref([])
const selectedIndex = ref(null)
const previewVisible = ref(false)
const idCounter = ref(0)

// 当前选中组件
const currentComponent = computed(() => {
  return selectedIndex.value !== null ? components.value[selectedIndex.value] : null
})

// 处理拖拽开始
const handleDragStart = (event, type) => {
  event.dataTransfer.setData('componentType', type)
}

// 处理拖拽放置
const handleDrop = (event) => {
  event.preventDefault()
  const type = event.dataTransfer.getData('componentType')
  
  if (type) {
    const component = createComponent(type)
    components.value.push(component)
    selectComponent(components.value.length - 1)
  }
}

// 处理拖拽覆盖
const handleDragOver = (event) => {
  event.preventDefault()
}

// 创建组件
const createComponent = (type) => {
  const baseComponent = {
    id: idCounter.value++,
    type,
    config: {
      name: `${type}_${idCounter.value}`,
      width: '300px',
      height: '200px',
      left: '0px',
      top: '0px'
    },
    data: {}
  }

  switch (type) {
    case 'text':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          text: '请输入文本内容',
          fontSize: '16px',
          color: '#ffffff'
        }
      }
    case 'image':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          src: '',
          alt: '图片描述'
        }
      }
    case 'border':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          borderColor: '#409eff',
          borderWidth: '2px'
        }
      }
    case 'chart-line':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          title: '折线图',
          option: {
            title: {
              text: '折线图示例',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              }
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }]
          }
        }
      }
    case 'chart-bar':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          title: '柱状图',
          option: {
            title: {
              text: '柱状图示例',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff'
                }
              }
            },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }]
          }
        }
      }
    case 'chart-pie':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          title: '饼图',
          option: {
            title: {
              text: '饼图示例',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {},
            series: [{
              type: 'pie',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ]
            }]
          }
        }
      }
    case 'chart-radar':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          title: '雷达图',
          option: {
            title: {
              text: '雷达图示例',
              textStyle: {
                color: '#fff'
              }
            },
            radar: {
              indicator: [
                { name: 'Sales', max: 6500 },
                { name: 'Administration', max: 16000 },
                { name: 'Information Technology', max: 30000 },
                { name: 'Customer Support', max: 38000 },
                { name: 'Development', max: 52000 },
                { name: 'Marketing', max: 25000 }
              ]
            },
            series: [{
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: 'Allocated Budget'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: 'Actual Spending'
                }
              ]
            }]
          }
        }
      }
    case 'map-china':
      return {
        ...baseComponent,
        config: {
          ...baseComponent.config,
          title: '中国地图',
          option: {
            title: {
              text: '中国地图示例',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'item',
              showDelay: 0,
              transitionDuration: 0.2
            },
            visualMap: {
              show: true,
              left: 'right',
              min: 0,
              max: 100,
              inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
              },
              text: ['High', 'Low'],
              calculable: true
            },
            series: [{
              name: '中国地图',
              type: 'map',
              map: 'china',
              roam: false,
              emphasis: {
                label: {
                  show: true
                }
              },
              data: [
                { name: '北京', value: 100 },
                { name: '天津', value: 20 },
                { name: '上海', value: 30 },
                { name: '重庆', value: 40 },
                { name: '河北', value: 50 },
                { name: '河南', value: 60 },
                { name: '云南', value: 70 },
                { name: '辽宁', value: 80 },
                { name: '黑龙江', value: 90 },
                { name: '湖南', value: 10 }
              ]
            }]
          }
        }
      }
    default:
      return baseComponent
  }
}

// 渲染组件
const renderComponent = (component) => {
  switch (component.type) {
    case 'text':
      return 'div'
    case 'image':
      return 'img'
    case 'border':
      return 'div'
    case 'chart-line':
    case 'chart-bar':
    case 'chart-pie':
    case 'chart-radar':
    case 'map-china':
      return 'div'
    default:
      return 'div'
  }
}

// 选择组件
const selectComponent = (index) => {
  selectedIndex.value = index
}

// 删除组件
const deleteComponent = (index) => {
  components.value.splice(index, 1)
  if (selectedIndex.value === index) {
    selectedIndex.value = null
  } else if (selectedIndex.value > index) {
    selectedIndex.value--
  }
}

// 复制组件
const copyComponent = (index) => {
  const component = JSON.parse(JSON.stringify(components.value[index]))
  component.id = idCounter.value++
  components.value.splice(index + 1, 0, component)
  selectComponent(index + 1)
}

// 预览大屏
const previewScreen = () => {
  previewVisible.value = true
}

// 保存配置
const saveConfig = () => {
  ElMessage.success('配置保存成功')
}

// 导出配置
const exportConfig = () => {
  const dataStr = JSON.stringify(components.value, null, 2)
  const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr)
  
  const exportFileDefaultName = 'bigscreen-config.json'
  
  const linkElement = document.createElement('a')
  linkElement.setAttribute('href', dataUri)
  linkElement.setAttribute('download', exportFileDefaultName)
  linkElement.click()
}
</script>

<style scoped>
.big-screen-designer {
  height: 100%;
  padding: 20px;
}

.components-panel {
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.component-list {
  padding: 10px;
}

.component-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
}

.component-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.component-item el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.canvas-panel {
  padding: 0 20px;
}

.design-canvas {
  min-height: 500px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  position: relative;
  padding: 20px;
}

.screen-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
  border-radius: 8px;
  overflow: hidden;
}

.empty-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #909399;
}

.empty-canvas el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.canvas-component {
  position: absolute;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.canvas-component.active {
  border-color: #409eff;
  box-shadow: 0 0 0 2px #409eff60;
}

.component-toolbar {
  position: absolute;
  top: -25px;
  right: 0;
  display: flex;
  gap: 5px;
  background: #409eff;
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 10;
}

.component-toolbar el-icon {
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  color: white;
}

.component-toolbar el-icon:hover {
  color: #ffd04b;
}

.component-toolbar .drag-handle {
  cursor: move;
}

.component-content {
  width: 100%;
  height: 100%;
}

.properties-panel {
  background: #f5f7fa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
}

.no-selection {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>